<template>
  <!--头部区域-->
  <div style="padding: 10px; height: 50px; line-height: 50px; display: flex">
    <div style="flex: 1"></div>
    <div
        style="
        width: 300px;
        display: flex;
        justify-content: right;
        align-items: center;
      "
    >
      <el-button
          type="info"
          style="margin-left: 15px"
          @click="reminderDialogVisible = true"
      >Docker使用说明
      </el-button>
    </div>
    <el-dialog v-model="reminderDialogVisible" title="Docker使用说明" width="40%">
      <el-form label-width="55px">
        <el-form-item label="第一步">
          <el-input
              v-model="reminder.first"
              style="width: 100%"
              readonly
          />
        </el-form-item>
        <el-form-item label="第二步" >
          <el-input
              v-model="reminder.second"
              style="width: 100%"
              type="textarea"
              :rows="4"
              readonly
          />
        </el-form-item>
        <el-form-item label="备注">
          <el-input
              v-model="reminder.remark"
              style="width: 100%"
              type="textarea"
              :rows="4"
              readonly
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span>
          <el-button type="primary" color="#fab6b6" @click="reminderDialogVisible = false"
          >关闭</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
  <div style="padding: 10px">
    <el-table :data="tableData" border="border" empty-text="暂无用户向您开放Docker">
      <el-table-column prop="id" label="DockerID" width="120px" />
      <el-table-column prop="name" label="Docker名" />
      <el-table-column prop="cpu" label="cpu核心数" />
      <el-table-column prop="memory" label="内存(MB)" />
      <el-table-column prop="imageOS" label="操作系统" :formatter=formatOS />
      <el-table-column prop="imageVersion" label="操作系统版本" :formatter=formatVersion />
      <el-table-column prop="nodePort" label="连接端口" />
      <el-table-column prop="expirationTime" label="到期时间" :formatter=formatTime />
    </el-table>
    <div style="margin: 10px 0">
      <el-pagination
          v-model:currentPage="currentPage"
          :page-sizes="[5, 10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import request from "../../untils/request";

export default {
  name: "openDocker",
  data() {
    return {
      reminderDialogVisible:false,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      form: {}, //某行数据
      reminder: {
        first: "记住您的Docker连接端口",
        second: "在您的命令行工具中使用ssh命令尝试与Docker进行连接:\n目标IP: 192.168.88.137\n目标端口: (Docker连接端口)",
        remark: "用户名: user+'您的用户ID'\n默认密码: 12345678\n若连接失败可能Docker正在创建,请稍后重试或联系管理员",
      },
    }
  },
  created() {
    this.load();
  },
  methods: {
    load() {
      request.get("/pod/viewPodAccess", {
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
        },
      })
          .then((res) => {
            this.tableData = res.data.records;
            this.total = res.data.total;
          });
    },
    formatOS(row){
      if (row.imageOS === "ubuntu") {
        return "Ubuntu";
      }
      if (row.imageOS === "centos") {
        return "CentOS";
      }
    },
    formatVersion(row){
      if (row.imageOS === "ubuntu" && row.imageVersion === "C") {
        return "22.04（GCC，G++捆绑包）";
      }
      if (row.imageOS === "ubuntu" && row.imageVersion === "Python") {
        return "22.04（Python捆绑包）";
      }
      return row.imageVersion;
    },
    formatTime(row){
      return row.expirationTime.split('T')[0];
    },
    handleSizeChange(pageSize) {
      //改变当前每页的个数触发
      this.pageSize = pageSize;
      this.load();
    },
    handleCurrentChange(pageNum) {
      //改变当前页码触发
      this.currentPage = pageNum;
      this.load();
    },
  },
};
</script>

<style scoped lang="less">
/deep/ .el-input {
  width: 85%;
}

/deep/ .el-dialog {
  background: #fcf9f4;
}

/deep/.el-form-item {
  margin-bottom: 30px;
}
</style>
